<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>帮助中心</title>
<style type="text/css">
	.button{width: 100px;height: 30px;margin:3px 20px 3px 0;padding-top: 3px;}
	*{font-size: 14px;}
	.th td{font-weight: 700;}
	/* label{margin: 0 10px 0 18px;font-weight: 500;height: 25px;line-height: 25px;} */
     .control-label{padding: 0;font-weight: bold;}
     .diaform{margin: 20px auto;}
     h3{border-bottom:1px solid #ddd;padding-bottom:5px;width: 98%;  }
     .datagrid-view{border-top:1px solid #ddd;margin-top: 8px;}
     .datagrid-pager{border-bottom:1px solid #ccc;}
     hr{margin:15px 0 13px 0 ;background-color: #ddd;height: 1px;border: 0; width: 120%;}
     .jianju{margin-left:15px; }
     .datagrid-htable{
     font-weight:bold;
	/* background-color: #148CCA; */
	}
	.demo_line_01{
    
    margin: 5px 0;
    font-size: 50px;
    line-height: 1px;
    text-align: center;
	}
	.demo_line_01 .line{
	display:inline-block;
	   width:47.8%;
	   height:1px;
	   background:#ddd;
	   vertical-align:middle;
	   margin-top:8px;
	}
	.container-fluid{
	padding-left: 15px;
	}
	.datagrid-ftable td div{
		font-size: larger;
	
	}
	#pulldown{
		margin-top: 20px;
	}
	
/* td.datagrid-header-over{
	background: #148CCA !important;
} */
</style>
<title>help管理</title>
<style>
.datagrid-body {
height:320px !important;
}
.datagrid-view {
height:350px !important;
}

</style>
<script type="text/javascript">
var isValid;
var helpType;
var data;
var flag=0;
var del=0;
$(function(){
		//查询
		$("#search").click(function(){
			var params = {
				title:$("#title").val(),
				keyWord:$("#keyWord").val(),
				isValid:$("#isValid").combobox("getValue"),
			};
			$("#tt").datagrid("unselectAll");
		$("#tt").datagrid('load',params);
		});
		//打开添加页面
		$("#add").click(function(){
			flag=0;
			$("#fm").form('clear');
			 data = $('#isValid1').combobox('getData');
			if(data){
	 			$("#isValid1").combobox('select',data[0].id);
			}
			 var data1 = $('#helpType').combobox('getData');
				if(data1){
		 			$("#helpType").combobox('select',data1[0].id);
				}
			$("#dlg").dialog("open");
			$('.window-header').find('.panel-title').text('新增');
		});
		
		//删除
		$("#delete").click(function(){
			var row = $('#tt').datagrid('getSelected');
			if(!row){
				$.messager.alert("请选择一行","请选择一行","error");
				return ;
			}
			var id = row.id;
			$.messager.confirm("删除确认","你确定要删除吗",function(r){
			if(r){
			$.ajax({
				url:'${pageContext.request.contextPath }/help/delete',
				contentType: "application/json; charset=utf-8",
				method:'delete',
				data:JSON.stringify(row),
				dataType:'json',
				success:function(data){
					if(data.result==1){
						$.messager.alert("删除结果","成功","info",reload);
						del=id;
					}else{
						$.messager.alert("失败",data.msg,"error");
					}
				}
			});
			}
			});


		});
		//编辑
		$("#edit").click(function(){
			var row = $('#tt').datagrid('getSelected');
			if(!row){
				
					$.messager.alert("请选择一行","请选择一行","error");
					return ;
			}
			var id = row.id;
			if (id==del) {
				$.messager.alert("请选择一行","请选择一行","error");
				return ;
			}
			$("#fm").form('load','${pageContext.request.contextPath }/help/edit?id='+id);
			flag=1;
			$("#dlg").dialog("open");
			$('.window-header').find('.panel-title').text('编辑');
		});
		
		$('#isValid').combobox({onLoadSuccess:function(){
			 data = $('#isValid').combobox('getData');
			if(data){
	 			$("#isValid").combobox('select',data[0].id);
			}
		}
		});
		
		//保存
		$('#fm').form({
	    	url:'${pageContext.request.contextPath}/help/save',
	    	onSubmit: function(){
			return $(this).form('validate');
	   	},
	    success:function(data){
	    	if (flag==0) {
				$('#fm').form('clear');
				$('#isValid1').combobox({onLoadSuccess:function(){
					 data = $('#isValid1').combobox('getData');
					if(data){
			 			$("#isValid1").combobox('select',data[0].id);
					}
				}
				});
				$('#helpType').combobox({onLoadSuccess:function(){
					var data = $('#helpType').combobox('getData');
					if(data){
			 			$("#helpType").combobox('select',data[0].id);
					}
				}
				});
			}
			
	    	data = eval("("+data+")");
			if(data.result==1){
				$.messager.alert("成功","成功","info",reload);
				$("#dlg").dialog("close");//关闭新增页面
			}else{
				$.messager.alert("失败：",data.msg,"error");
			}
	    }
		});
		
		
		init();
		
	});
	
function init(){
	//初始化
		$.ajax({
			url:'${pageContext.request.contextPath }/enum?enumName=HelpType',			
			cache:true,
			async:false,
			success:function(data){
				helpType = data;
			}
			
		});
	//初始化是否有效下拉框
		$.ajax({
			url:'${pageContext.request.contextPath }/enum?enumName=IsValid',			
			cache:true,
			async:false,
			success:function(data){
				isValid = data;
			}
		});
};

function saved(){
$('#fm').submit();
};

function reload(){
$("#tt").datagrid('reload');
};

function closeDlg(){
	$("#tt").datagrid('reload');
	$('#dlg').dialog('close');
};
 function getHelpType(value,row,index){
	for(var g in helpType){
		if(helpType[g].id==value){
			return helpType[g].name;
		}
	}
	
	return value;
}; 

function getIsValid(value,row,index){
	for(var g in isValid){
		if(isValid[g].id==value){
			return isValid[g].name;
		}
	}
	
	return value;
}
function rowStyle(index,row){
	if (index%2==0){     
        return 'background-color:lightcyan;';     
    }     
}

</script>
</head>
<body>
<div class="jianju">
<h3>帮助中心</h3>
<div id="tb" style="height:auto">
<div>
	<a id="add" href="#" class="easyui-linkbutton button" iconCls="icon-add" plain="false">新增</a>
	<a id="edit" href="#" class="easyui-linkbutton button" iconCls="icon-edit" plain="false">编辑</a>
	<a id="delete" href="#" class="easyui-linkbutton button" iconCls="icon-remove" plain="false">删除</a>
	</div>
	<hr/>
	<div>
<label style="margin-left:0;">标题：</label><input id="title" class="easyui-textbox" style="width:260px">
<label style="margin-left:15px;">关键字：</label><input id="keyWord" class="easyui-textbox" style="width:160px">
<label style="margin-left:15px;">是否有效：</label><select id="isValid"  class="easyui-combobox" style="width:100px" mode="remote"
				url="${pageContext.request.contextPath }/enum?enumName=IsValid&all=true"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
		</select>
<a id="search" href="#" class="easyui-linkbutton button" style="margin-left:15px;" iconCls="icon-search">查询</a>	
</div>
</div>
	<table id="tt" class="easyui-datagrid" 
		url="${pageContext.request.contextPath }/help/list"
		title="" style="width:98%;minWidth:1000px;" iconCls="icon-save"
		rownumbers="true" pagination="true"
		pageList="[10,20,30,40]" method="get"
		toolbar="#tb" singleSelect="true"
		fitColumns="true" idField="id" rowStyler="rowStyle">
		<thead>
			<tr>
				<th data-options="field:'title'" style="width:36%">标题</th>
				<th data-options="field:'keyWord'" style="width:35%">关键字</th>
				<th data-options="field:'type',align:'center',formatter:getHelpType" style="width:15%">类别</th>
				<th data-options="field:'isValid',align:'center',formatter:getIsValid" style="width:13%">是否有效</th>
			</tr>
		</thead>
	</table>
</div>


	<div id="dlg" class="easyui-dialog" style="width:400px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons" modal="true">
	<div class="ftitle"></div>
	<form id="fm" method="post" class="form-horizontal" role="form">
		<input type="hidden" name="id">
		<div id="username" class="fitem form-group">
			<label class="col-md-3 control-label">标题：</label>
			<div class="col-md-4" style="padding:0">
			<input name="title" class="easyui-validatebox easyui-textbox" style="width:162px" placeholder="请输入标题" required="true" validType="length[1,50]">
			</div>
		</div>
		<div class="fitem form-group">
			<label class="col-md-3 control-label">关键字：</label>
			<div class="col-md-4" style="padding:0">
			<input name="keyWord" type="text" class="easyui-validatebox easyui-textbox" style="width:162px" required="true" validType="length[1,50]"/>
			</div>
		</div>
		<div class="fitem form-group">
			<label class="col-md-3 control-label">类型：</label>
			<div class="col-md-4" style="padding:0">
			<select id="helpType" name="type" class="easyui-combobox" style="width:162px" mode="remote"
				url="${pageContext.request.contextPath }/enum?enumName=HelpType"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
		</select>
		</div>
		</div>
		<div class="fitem form-group">
			<label class="col-md-3 control-label">是否有效：</label>
			<div class="col-md-4" style="padding:0">
			<select id="isValid1" name="isValid" class="easyui-combobox" style="width:162px" mode="remote"
				url="${pageContext.request.contextPath }/enum?enumName=IsValid" name="isValid"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
		</select> 
			</div>
		</div>
		
		<div class="fitem form-group">
			<label class="col-md-3 control-label">内容：</label>
			<div class="col-md-4" style="padding:0">
			<textarea name="content" class="easyui-validatebox easyui-textbox" style="width:162px;height:80px;" data-options="multiline:true" required="true" validType="length[1,500]"></textarea>
		</div>
		</div>
	</form>
</div>
<div id="dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:saved()">保存</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:closeDlg()">取消</a>
</div>	
	
	
	
	
</div>	

</body>
</html>